import React from 'react'
import { View, Text, Image } from '@tarojs/components'
import Images from '@ASSET/Images'
import i18n from '@I18N'
import LoginVerifyBtn from '@COMPONENTS/Button/LoginVerifyBtn'
import { useSelector } from 'react-redux'
import dayjs from 'dayjs'
import { LanguageType } from '@INTERFACES/Common'
import { PatientITF } from '@INTERFACES/Patient'
import { PATIENT_SITE } from '@CONSTANTS/painLog'
import withWebLogin from '@HOC/withWebLogin'
import style from './EmptyLogs.module.scss'

interface Props {
  dateBucket: string
  language: LanguageType
  painLogPatient?: PatientITF
  onClickNoPain: (isVisitorLogin?: boolean) => void
  onCreateLog: (site: PATIENT_SITE, isVisitorLogin?: boolean) => void
  showLogin: () => void
}

const DotShadow: React.FC = () => (
  <View className={style.dotOuter}>
    <View className={style.dotInner}>
      <View className={style.dotInner1} />
    </View>
  </View>
)

const EmptyLogs: React.FC<Props> = ({
  dateBucket,
  language,
  painLogPatient,
  onCreateLog,
  onClickNoPain,
  showLogin
}) => {
  const isVisitor = useSelector(state => state.profile.isVisitor)
  const isHasPatient = !!(painLogPatient?.PatientId || painLogPatient?.p8Id)
  const isToday = dateBucket === dayjs().format('YYYY-MM-DD') && isHasPatient
  const name = isVisitor ? '' : painLogPatient?.Name[language] || ''
  const onClickHead = (isVisitorLogin?: boolean) => {
    onCreateLog?.(PATIENT_SITE.Head, isVisitorLogin)
  }
  const onClickOther = (isVisitorLogin?: boolean) => {
    onCreateLog?.(PATIENT_SITE.Other, isVisitorLogin)
  }
  return (
    <View className={style.container}>
      <Image src={Images.dataCenter.icon_no_log_header} className={style.iconLogHeader} />
      <View className={style.shadowDot}>
        <DotShadow />
        <DotShadow />
        <DotShadow />
      </View>
      <View className={style.shadow1}>
        <View className={style.shadow2}>
          <View className={style.content}>
            <View className={style.titleContainer}>
              <Text className={style.title}>
                {`嗨${name}～  ${isToday ? '' : '记录头痛日志，查看头痛诱因吧!'}`}
              </Text>
              {isToday && (
                <View className={style.innerText}>
                  <View className={style.line} />
                  <Text className={style.title}>今天感觉怎么样？ </Text>
                </View>
              )}
            </View>
            <View className={style.bottom}>
              <LoginVerifyBtn
                className={style.noPainBtn}
                onClick={onClickNoPain}
                showLogin={showLogin}
                loginSuccess={() => onClickNoPain(true)}
              >
                <Image src={Images.dataCenter.icon_no_pain} className={style.icon} />
                <Text className={style.noPainText}>{i18n.dataCenter.noPain()}</Text>
              </LoginVerifyBtn>
              <LoginVerifyBtn
                showLogin={showLogin}
                className={style.themeBtn}
                onClick={onClickHead}
                loginSuccess={() => onClickHead(true)}
              >
                {i18n.common.headache()}
              </LoginVerifyBtn>
              <LoginVerifyBtn
                showLogin={showLogin}
                className={style.themeBtn}
                onClick={onClickOther}
                loginSuccess={() => onClickOther(true)}
              >
                {i18n.log.bodyPain()}
              </LoginVerifyBtn>
            </View>
          </View>
        </View>
      </View>
    </View>
  )
}

export default withWebLogin(EmptyLogs)
